import React, { useEffect, useState } from "react";
import * as echarts from 'echarts';
interface eXamplis {
  examplis: string
}
const Examplis: React.FC<eXamplis> = (props: any) => {
  var myChart
  const [option, setOption] = useState({
    title: {
      text: '访客记录变化图'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['近七天总数', '近七天外来人员', '近七天来访老师', '近七天来访学生']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 25,
      axisLabel: {
        formatter: '{value}'
      }
    },
    series: [
      {
        name: '近七天总数',
        type: 'line',
        stack: 'Total',
        data: [12, 13, 1, 20, 1, 20, 10]
      },
      {
        name: '近七天外来人员',
        type: 'line',
        stack: 'Total',
        data: [2, 1, 1, 4, 5, 3, 4]
      },
      {
        name: '近七天来访老师',
        type: 'line',
        stack: 'Total',
        data: [5, 2, 1, 4, 9, 7, 4]
      },
      {
        name: '近七天来访学生',
        type: 'line',
        stack: 'Total',
        data: [3, 8, 6, 7, 9, 1, 8]
      }
    ]
  })
  useEffect(() => {
    // console.log(props);
    // let {examplis} = props
    myChart = echarts.init(document.getElementById(props.examplis) as HTMLElement);
    myChart.setOption(option)
  })
  return (
    <div id={props.examplis} children className="examples" style={{ width: "100%", height: '430px' }}></div>
  )
}
export default Examplis